<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
*{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
body{
    background: black;
}
    span{
        width: 30px;
        height: 30px;
        background: url("images/star.png") no-repeat;
        position: absolute;
        background-size:100% 100%;
        animation: flash 1s alternate infinite;
    }
    @keyframes flash {
    0%{opacity:0%;} 100%{opacity: 100%;}

    }
    span:hover{
        transform: scale(3, 3) rotate(180deg) !important;
        transition: all 1s;
    }
</style>
<body>
<script>
    window.onload =function () {
        var winW = document.documentElement.clientWidth;
        var winH = document.documentElement.clientHeight;
        for(var i=0; i<150; i++){
            var span = document.createElement("span");
            document.body.appendChild(span);
            var x = parseInt(Math.random()* winW);
            var y = parseInt(Math.random()* winH );
            span.style.left = x+"px";
            span.style.top = y+"px";

            var sc = Math.random()*1.5;
            span.style.transform = "scale("+sc+","+sc+")";

            var rate = Math.random() * 1.5;
            span.style.animationDelay = rate + 's';
        }
    }
</script>
</body>
</html>